<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <van-row>
        <van-col span="3" icon="wap-home-o">
          <van-icon name="wap-home-o" />
        </van-col>
        <van-col span="12" offset="3">值得买</van-col>
        <van-col span="3">
          <van-icon name="search" />
        </van-col>
        <van-col span="3">
          <van-icon name="shopping-cart-o" />
        </van-col>
      </van-row>
    </div>
    <!-- 主页面 -->
    <div class="main">
      <!-- 轮播图 -->
      <div class="main_image">
        <!-- 值得买 -->
        <img
          src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
          alt=""
        />
        <p class="text">严选好物&nbsp;用心生活</p>
        <div class="main_swipe">
          <ImageList :navList="navList" />
        </div>
      </div>

      <div class="waterfall">
        <vue-waterfall-easy
          :imgsArr="imgsArr"
          @scrollReachBottom="getData"
          :maxCols="4"
        >
          <div class="img-info" slot-scope="props">
            <p class="some-info">第{{ props.index + 1 }}张图片</p>
            <p class="some-info">{{ props.value.info }}</p>
          </div></vue-waterfall-easy
        >
      </div>
    </div>
  </div>
</template>

<script>
import { reqNavList, reqWaterfallList } from "@/api";
import ImageList from "./ImageList/ImageList.vue";
import vueWaterfallEasy from "vue-waterfall-easy";
import axios from "axios";
export default {
  name: "Worthbuy",
  components: { ImageList, vueWaterfallEasy },
  data() {
    return {
      navList: [],
      imgsArr: [],
      group: 1, // request param
    };
  },
  //调用获取轮播图数据的方法
  mounted() {
    this.gitNavList();
  },
  created() {
    this.getData();
  },
  methods: {
    //获取轮播图数据
    async gitNavList() {
      //发送请求获取数据
      let result = await reqNavList();

      this.navList = result.data.navList;
    },
    // async getData() {
    //   let result = await reqWaterfallList(this.group);
    //   console.log(result);
    //   if (result.code === "200") {
    //     this.imgsArr = this.imgsArr.concat(result.data.result);
    //     this.group++;
    //   },

    getData() {
      axios
        .get("/v1/find/recAuto.json?page=" + this.group) // 真实环境中，后端会根据参数group返回新的图片数组，这里我用一个静态json文件模拟
        .then((res) => {
          this.group++;
          if (this.group === 10) {
            // 模拟已经无新数据，显示 slot="waterfall-over"
            this.$refs.waterfall.waterfallOver();
            return;
          }
          this.imgsArr = this.imgsArr.concat(res.data);
        });
    },
  },
};
</script>

<style lang="less" scoped>
// 头部样式
.header {
  font-size: 0.6rem;
  text-align: center;
  height: 1.1rem;
  line-height: 1.1rem;
}
.main {
  width: 100%;
  height: 100%;
  background-color: #eee;
  .main_image {
    width: 94%;
    background: url(http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView)
      no-repeat;
    background-size: 10rem;
    padding: 0.9rem 3% 0 3%;
    position: relative;
    img {
      width: 1.6rem;
    }
    p {
      font-size: 0.4rem;
      color: #fff;
      position: absolute;
      left: 2rem;
      top: 1.2rem;
    }
    .main_swipe {
      width: 100%;
      margin-top: 0.2rem;
      background-color: #fff;
      border-radius: 0.16rem;
    }
  }
  .waterfall {
    width: 100%;
    height: 1000px;
  }
}
// 主页面样式
</style>